<!--
 * @author: 十一
 * @since: 2024-06-19
 * index.vue
 * @desc: new page
-->
<template>
  <a-row :gutter="15">
    <a-col
      :xxl="{ span: 3 }"
      :xl="{ span: 3 }"
      :lg="{ span: 4 }"
      :md="{ span: 5 }"
      :sm="{ span: 6 }"
      :xs="{ span: 8 }"
    >
      <div class="classify-group">
        <div
          class="classify-item"
          v-for="item in classificationList"
          :key="item.id"
          @mouseover="handleMouseover(item)"
          @mouseout="handleMouseout(item)"
          :class="{ 'hover-class-classify': item.isHovering }"
          @click="handleClick(item)"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
    </a-col>
    <a-col
      :xxl="{ span: 21 }"
      :xl="{ span: 21 }"
      :lg="{ span: 20 }"
      :md="{ span: 19 }"
      :sm="{ span: 18 }"
      :xs="{ span: 16 }"
    >
      <a-row :gutter="15">
        <a-col
          :xxl="{ span: 6 }"
          :xl="{ span: 6 }"
          :lg="{ span: 8 }"
          :md="{ span: 8 }"
          :sm="{ span: 12 }"
          :xs="{ span: 24 }"
          v-for="(item, index) in colorsList"
          :key="index"
          class="mb-5"
        >
          <a-card
            v-if="activeId == 3"
            :bordered="false"
            :style="{ background: 'linear-gradient(45deg, ' + item.hex1 + ', ' + item.hex2 + ')' }"
            class="text-center pt-5 pb-5 cursor-pointer"
            @mouseover="handleMouseover(item)"
            @mouseout="handleMouseout(item)"
            :class="{ 'hover-class': item.isHovering }"
            @click="copyText(item)"
          >
            <div :class="item.type == 0 ? ' text-black' : 'text-light-50'">{{ item.hex }}</div>
            <div :class="item.type == 0 ? ' text-black' : 'text-light-50'">{{ item.nameZh }}</div>
          </a-card>
          <a-card
            v-else
            :bordered="false"
            :style="{ background: item.hex }"
            class="text-center pt-5 pb-5 cursor-pointer"
            @mouseover="handleMouseover(item)"
            @mouseout="handleMouseout(item)"
            :class="{ 'hover-class': item.isHovering }"
            @click="copyText(item)"
          >
            <div :class="item.type == 0 ? ' text-black' : 'text-light-50'">{{ item.hex }}</div>
            <div :class="item.type == 0 ? ' text-black' : 'text-light-50'">{{ item.nameZh }}</div>
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
  <UpCircleOutlined class="scroll-top" @click="scrollToTop" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Clipboard from 'clipboard'
import { UpCircleOutlined } from '@ant-design/icons-vue'
import { colors } from '@/assets/js/colors.js'
import { colors1 } from '@/assets/js/colors1.js'
import { colors2 } from '@/assets/js/colors2.js'
import { message } from 'ant-design-vue'
const classificationList = ref([
  { id: 1, title: '基础色', isHovering: false },
  { id: 2, title: '过渡色', isHovering: false },
  { id: 3, title: '渐变色', isHovering: false }
])
const copyText = (item: any) => {
  let hex = ''
  if (activeId.value == 3) {
    hex = `linear-gradient(45deg, ${item.hex1}, ${item.hex2})`
  } else {
    hex = item.hex
  }
  const clipboard = new Clipboard('.btn-copy', {
    text: () => hex
  })

  clipboard.on('success', () => {
    message.success('复制成功')
    clipboard.destroy()
  })

  clipboard.on('error', () => {
    message.error('复制失败')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}
const colorsList = ref(colors)
const colorsList1 = ref(colors1)

const activeId = ref(1)
const handleClick = (item: any) => {
  activeId.value = item.id
  if (item.id == 1) {
    colorsList.value = colors
  }
  if (item.id == 2) {
    colorsList.value = colors1
  }
  if (item.id == 3) {
    colorsList.value = colors2
  }
}
const handleMouseover = (item: any) => {
  item.isHovering = true
}
const handleMouseout = (item: any) => {
  item.isHovering = false
}
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style lang="less" scoped>
.hover-class-classify {
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
  font-size: 18px !important;
  color: #30e4c4 !important;
}
.classify-group {
  background: #ffffff;
  border-radius: 10px;
  .classify-item {
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #f1f3f7;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
  }
}
.hover-class {
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(5, 202, 228, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
}
.scroll-top {
  position: fixed;
  right: 5%;
  bottom: 10%;
  font-size: 30px;
  color: #b0c4de;
  cursor: pointer;
}
.scroll-top:hover {
  color: #30e4c4;
}
</style>
